<template>
    <div class="maincontent">
        <swiper :options="swiperOption">
          <swiper-slide>
            <firsthome></firsthome>
          </swiper-slide>
          <swiper-slide>
            <secondhome></secondhome>
          </swiper-slide>
        </swiper>
        <div class='swiper-pagination'></div>
        <!-- <a-carousel>
            <div>
                <firsthome></firsthome>
            </div>
            <div>
                <secondhome></secondhome>
            </div>
        </a-carousel> -->
    </div>
</template>

<script>
import firsthome from './firsthome.vue'
import secondhome from './secondhome.vue'
export default {
  name: 'Home',
  data () {
    // let self = this
    let assignPageIndex = 0
    if (localStorage.getItem('assignPageIndex')) {
      assignPageIndex = localStorage.getItem('assignPageIndex')
    }
    return {
      swiperOption: {
        // loop: true,
        initialSlide: assignPageIndex,
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd (swiper) {
            // self.nowIndex = this.activeIndex
            localStorage.setItem('assignPageIndex', this.activeIndex)
          }
        }
      }
    }
  },
  components: {
    firsthome,
    secondhome
  },
  created () {
    if (localStorage.getItem('WardBedNum')) {
      this.$store.state.bedNo = localStorage.getItem('WardBedNum')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/css/variables.styl';
@import '../../assets/css/indexcommon.css';
.ant-carousel >>> .slick-dots li button
    border: 0;
    cursor: pointer;
    background: #d1d1d1;
    opacity: 0.3;
    display: block;
    width: 0.18rem;
    height: 0.18rem;
    border-radius: 50%;
    outline: none;
    font-size: 0;
    color: transparent;
    transition: all 0.5s;
    padding: 0;
    margin: 0 0.19rem;
.ant-carousel >>> .slick-dots li.slick-active button
    background: #37c0b0;
    opacity: 1;
    width: 0.18rem;
    height: 0.18rem;
    box-shadow: 0px 0.03rem 0.06rem 0px rgba(35, 201, 181, 0.59);
.maincontent
    background: #e9edf8;
    height: 100%;
    .swiper-pagination{
      width: 100%;
      text-align:center;
    }
.maincontent >>> .swiper-pagination-bullet{
  background: #d1d1d1;
    opacity: 1;
    width: 0.18rem;
    height: 0.18rem;
    box-shadow: 0px 0.03rem 0.06rem 0px rgba(193, 197, 197, 0.59);
    margin: 0 0.1rem
}
.maincontent >>> .swiper-pagination-bullet-active{
  background: #37c0b0
  box-shadow: 0px 0.03rem 0.06rem 0px rgba(35, 201, 181, 0.59);
}
</style>
